//一.根据数据渲染分类条
// console.log(goodData);

function renderNavigator(path) {
  console.log(path);

  //先把分类调理的内容清空掉
  var ele = document.querySelector(".conPoint");
  ele.innerHTML = "";
  //根据path 数据生成对应的dom结构
  path.forEach(function (item) {
    var aEle = document.createElement("a");
    aEle.innerHTML = item.title;
    if (typeof item.url !== "undefined") {
      aEle.href = item.url;
    }
    ele.appendChild(aEle);
  });
}
renderNavigator(goodData.path);

//二.渲染 产品的详细内容
function renderProductDetail(goodsDetail) {
  var priceAreaEle = document.querySelector(".priceArea");
  priceAreaEle.innerHTML = `
  <h3 class="title">
    ${goodsDetail.title}
  </h3>
  <p class="con1">
    ${goodsDetail.recommend}
  </p>
  <div class="price">
    <div class="priceDetail">
      <p>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</p>
      <p>￥ <span>${goodsDetail.price}</span> 元</p>
    </div>
    <div class="buy">
      <p>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</p>
      <p>
        <span>${goodsDetail.promoteSales.type}</span
        >${goodsDetail.promoteSales.content}
      </p>
    </div>
  </div>
  <div class="support">
    <div class="supportDetail">
      <p>支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</p>
      <p>${goodsDetail.support}</p>
    </div>
    <div class="address">
      <p>配&nbsp;送&nbsp;至</p>
      <p>${goodsDetail.address}</p>
    </div>
  </div>
  <!-- 手机详细结束 -->
</div>`;
}
renderProductDetail(goodData.goodsDetail);

//根据数据渲染 型号选择区域
var typeArr = [];
function renderType(crumbData) {
  var chooseAreaEle = document.querySelector(".chooseArea");
  chooseAreaEle.innerHTML = "";
  crumbData.forEach(function (item) {
    var dlEle = document.createElement("dl");
    var dtEle = document.createElement("dt");
    dlEle.innerHTML = item.title;
    dlEle.appendChild(dtEle);
    item.data.forEach(function (val, kk) {
      var ddEle = document.createElement("dd");
      //   console.log(val);
      ddEle.innerHTML = val.type;
      if (kk == 0) {
        typeArr.push(ddEle);
      }
      dlEle.appendChild(ddEle);
    });
    chooseAreaEle.appendChild(dlEle);
  });
  console.log(typeArr); //存放选中型号元素的数组
  renderChooseType(typeArr);
}
renderType(goodData.goodsDetail.crumbData);

function renderChooseType(typeArr) {
  var chooseInsertEle = document.querySelector(".chooseInsert");
  chooseInsertEle.innerHTML = "";
  typeArr.forEach(function (item) {
    var markEle = document.createElement("mark");
    markEle.innerHTML = `${item.innerHTML}<a>X</a>`;
    chooseInsertEle.appendChild(markEle);
  });
}
